import * as React from 'react';

import {faker} from '@faker-js/faker/locale/en';
import {FaceRobot} from '@gravity-ui/icons';
import type {Meta, StoryFn, StoryObj} from '@storybook/react-webpack5';
import {useArgs} from 'storybook/preview-api';

import {Showcase} from '../../../demo/Showcase';
import {ShowcaseItem} from '../../../demo/ShowcaseItem';
import {Avatar} from '../Avatar';

import {getAvatarSrcSet} from './utils/getAvatarSrcSet';

const meta: Meta<typeof Avatar> = {
    title: 'Components/Data Display/Avatar',
    component: Avatar,
    parameters: {
        a11y: {
            context: '#storybook-root',
            config: {
                rules: [
                    {
                        id: 'color-contrast',
                        enabled: false,
                        selector: '.g-avatar__text',
                    },
                ],
            },
        },
    },
};

export default meta;

type Story = StoryObj<typeof Avatar>;
type StoryFunc = StoryFn<typeof Avatar>;

const imgUrl =
    '';

const randomAvatars = faker.helpers
    .uniqueArray(() => faker.number.int({min: 20, max: 500}), 30)
    .reduce(
        (sizes, num) => ({
            ...sizes,
            [num]: faker.image.urlLoremFlickr({
                category: 'cats',
                width: num,
                height: Math.round((num / 640) * 480),
            }),
        }),
        {},
    );

const imageProps = {
    imgUrl,
    alt: 'Sample image',
};

const iconProps = {
    backgroundColor: 'var(--g-color-base-brand)',
    icon: FaceRobot,
    color: 'var(--g-color-text-brand-contrast)',
    'aria-label': 'Sample icon',
};

const textProps = {
    backgroundColor: 'var(--g-color-base-generic-medium)',
    text: 'Charles Darwin',
    color: 'var(--g-color-text-primary)',
};

const squareProps = {
    backgroundColor: 'var(--g-color-base-generic-medium)',
    text: 'Charles Darwin',
    color: 'var(--g-color-text-primary)',
    shape: 'square' as const,
};

const BORDER_COLOR = 'var(--g-color-line-misc)';

export const Image: Story = {
    args: {
        imgUrl,
        'aria-label': 'Sample avatar',
        alt: 'Generated avatar',
    },
};

export const ImageSrcSet: StoryFunc = (args) => {
    const [, setArgs] = useArgs();

    React.useEffect(() => {
        if (args.size) {
            setArgs({srcSet: getAvatarSrcSet(args.size, randomAvatars)});
        }
    }, [args.size, setArgs]);

    return <Avatar {...args} />;
};

ImageSrcSet.args = {
    imgUrl: faker.image.urlLoremFlickr({category: 'cats'}),
    size: 'xl',
    alt: 'Image with srcset',
    'aria-label': 'Random avatar',
};

export const ImageFallback: Story = {
    args: {
        imgUrl: 'random_link',
        fallbackImgUrl: imgUrl,
        alt: 'Fallbacked image',
        'aria-label': 'Fallback demonstration',
    },
};

export const Icon: Story = {
    args: {
        theme: 'brand',
        icon: FaceRobot,
        'aria-label': 'Icon',
    },
};

export const Text: Story = {
    args: {
        theme: 'brand',
        text: 'UI',
        'aria-label': 'UI',
    },
};

export const TextInitials: Story = {
    args: {
        theme: 'brand',
        text: 'Charles Darwin',
        'aria-label': 'CD',
    },
};

export const WithBorder: Story = {
    args: {
        ...imageProps,
        borderColor: 'var(--g-color-line-misc)',
        'aria-label': 'Image with border',
    },
};

export const AvatarShowcase: Story = {
    name: 'Showcase',
    render: () => {
        return (
            <React.Fragment>
                <Showcase title="Image">
                    <ShowcaseItem title="3xs">
                        <Avatar {...imageProps} size="3xs" aria-label="Avatar with 3XS size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar {...imageProps} size="2xs" aria-label="Avatar with 2XS size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar {...imageProps} size="xs" aria-label="Avatar with XS size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar {...imageProps} size="s" aria-label="Avatar with S size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar {...imageProps} size="m" aria-label="Avatar with M size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar {...imageProps} size="l" aria-label="Avatar with L size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar {...imageProps} size="xl" aria-label="Avatar with XL size" />
                    </ShowcaseItem>
                    <ShowcaseItem title="3xs">
                        <Avatar
                            {...imageProps}
                            size="3xs"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with 3XS size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar
                            {...imageProps}
                            size="2xs"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with 2XS size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar
                            {...imageProps}
                            size="xs"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with XS size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar
                            {...imageProps}
                            size="s"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with S size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar
                            {...imageProps}
                            size="m"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with M size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar
                            {...imageProps}
                            size="l"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with L size and border"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar
                            {...imageProps}
                            size="xl"
                            borderColor={BORDER_COLOR}
                            aria-label="Avatar with XL size and border"
                        />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Icon">
                    <ShowcaseItem title="3xs">
                        <Avatar {...iconProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar {...iconProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar {...iconProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar {...iconProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar {...iconProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar {...iconProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar {...iconProps} size="xl" />
                    </ShowcaseItem>
                    <ShowcaseItem title="3xs">
                        <Avatar {...iconProps} size="3xs" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar {...iconProps} size="2xs" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar {...iconProps} size="xs" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar {...iconProps} size="s" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar {...iconProps} size="m" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar {...iconProps} size="l" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar {...iconProps} size="xl" borderColor={BORDER_COLOR} />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Text">
                    <ShowcaseItem title="3xs">
                        <Avatar {...textProps} size="3xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar {...textProps} size="2xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar {...textProps} size="xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar {...textProps} size="s" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar {...textProps} size="m" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar {...textProps} size="l" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar {...textProps} size="xl" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="3xs">
                        <Avatar
                            {...textProps}
                            size="3xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar
                            {...textProps}
                            size="2xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar
                            {...textProps}
                            size="xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar
                            {...textProps}
                            size="s"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar
                            {...textProps}
                            size="m"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar
                            {...textProps}
                            size="l"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar
                            {...textProps}
                            size="xl"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Square">
                    <ShowcaseItem title="3xs">
                        <Avatar {...squareProps} size="3xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar {...squareProps} size="2xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar {...squareProps} size="xs" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar {...squareProps} size="s" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar {...squareProps} size="m" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar {...squareProps} size="l" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar {...squareProps} size="xl" aria-label="CD" />
                    </ShowcaseItem>
                    <ShowcaseItem title="3xs">
                        <Avatar
                            {...squareProps}
                            size="3xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <Avatar
                            {...squareProps}
                            size="2xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <Avatar
                            {...squareProps}
                            size="xs"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <Avatar
                            {...squareProps}
                            size="s"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <Avatar
                            {...squareProps}
                            size="m"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <Avatar
                            {...squareProps}
                            size="l"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <Avatar
                            {...squareProps}
                            size="xl"
                            borderColor={BORDER_COLOR}
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Theme / view icon">
                    <ShowcaseItem title="normal / filled icon">
                        <Avatar
                            theme="normal"
                            view="filled"
                            size="l"
                            icon={FaceRobot}
                            aria-label="Sample icon"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="brand / filled icon">
                        <Avatar
                            theme="brand"
                            view="filled"
                            size="l"
                            icon={FaceRobot}
                            aria-label="Sample icon"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="normal / outlined icon">
                        <Avatar
                            theme="normal"
                            view="outlined"
                            size="l"
                            icon={FaceRobot}
                            aria-label="Sample icon"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="brand / outlined icon">
                        <Avatar
                            theme="brand"
                            view="outlined"
                            size="l"
                            icon={FaceRobot}
                            aria-label="Sample icon"
                        />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Theme / view text">
                    <ShowcaseItem title="normal / filled icon">
                        <Avatar
                            theme="normal"
                            view="filled"
                            size="l"
                            text="Charles Darwin"
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="brand / filled icon">
                        <Avatar
                            theme="brand"
                            view="filled"
                            size="l"
                            text="Charles Darwin"
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="normal / outlined icon">
                        <Avatar
                            theme="normal"
                            view="outlined"
                            size="l"
                            text="Charles Darwin"
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                    <ShowcaseItem title="brand / outlined icon">
                        <Avatar
                            theme="brand"
                            view="outlined"
                            size="l"
                            text="Charles Darwin"
                            aria-label="CD"
                        />
                    </ShowcaseItem>
                </Showcase>
            </React.Fragment>
        );
    },
};
